<template>
  <div class="cart">
    <!-- goods-list -->
    <div class="list-wrapper">
      <van-swipe-cell
        v-for="(goodsItem,index) in goodsList"
        :key="index"
        :right-width="65"
        :left-width="0"
        async-close
        @close="delItem($event, goodsItem)"
      >
        <!-- <view slot="left">选择</view> -->
        <van-cell-group>
          <van-cell class="cell-item">
            <van-row gutter="8" class="cell-row">
              <van-col span="2" class="col">
                <div class="is-selected" @click="changeSingle(goodsItem)">
                  <van-radio-group :value="goodsItem.is_selected" @change="onSingleChange">
                    <van-radio checked-color="#59b371" :name="1"></van-radio>
                  </van-radio-group>
                </div>
              </van-col>
              <van-col span="6" class="col">
                <div class="img">
                  <img class="pic" :src="goodsItem.list_pic_url">
                </div>
              </van-col>
              <van-col span="16" class="col">
                <div class="info">
                  <div class="title">{{goodsItem.name}}</div>
                  <div class="price">{{goodsItem.retail_price}}元/人</div>
                  <div class="counter">
                    <van-stepper
                      minus-class="minus"
                      plus-class="plus"
                      custom-class="root"
                      input-class="input"
                      :value="goodsItem.num_count"
                      @plus="onSinglePlus(goodsItem)"
                      @minus="onSingleMinus(goodsItem)"
                    />
                  </div>
                </div>
              </van-col>
            </van-row>
          </van-cell>
        </van-cell-group>
        <view slot="right">
          <div class="right-del">删除</div>
        </view>
      </van-swipe-cell>
    </div>

    <!-- sub-bar -->
    <div class="sub-bar">
      <van-submit-bar
        :safe-area-inset-bottom="false"
        :price="totalPrice"
        button-text="提交订单"
        @submit="onClickButton"
        :tip="true"
      >
        <van-radio-group :value="isAllSelected" @click="selectAll">
          <van-radio checked-color="#59b371" :name="1">全选</van-radio>
        </van-radio-group>
        <view slot="tip">
          您的收货地址不支持同城送,
          <text>修改地址</text>
        </view>
      </van-submit-bar>
      <van-dialog id="van-dialog"/>
    </div>
  </div>
</template>

<script>
import { get } from "../../utils";
import Dialog from "../../../static/vant/dialog/dialog";
export default {
  props: {},
  data() {
    return {
      goodsList: [{}],
      isAllSelected: 0
    };
  },
  computed: {
    totalPrice() {
      let re = 0;
      this.goodsList.forEach(i => {
        if (i.is_selected === 1) {
          re += i.retail_price * i.num_count * 100;
        }
      });
      return re;
    }
  },
  created() {},
  async mounted() {
    const re = await get("/mock/cartList.json");
    this.goodsList = re.cartData;
  },
  watch: {
    goodsList: {
      handler(newVal, oldVal) {
        const isAllChecked = newVal.every(i => i.is_selected === 1);
        if (isAllChecked) {
          this.isAllSelected = 1;
        } else {
          this.isAllSelected = 0;
        }
      },
      deep: true
    }
  },
  methods: {
    onSinglePlus(i) {
      i.num_count++;
    },
    onSingleMinus(i) {
      i.num_count--;
    },
    delItem($event, item) {
      const { position, instance } = $event.mp.detail;
      switch (position) {
        case "left":
          break;
        case "cell":
          instance.close();
          break;
        case "right":
          Dialog.confirm({
            message: "确定删除吗？"
          }).then(() => {
            this.goodsList = this.goodsList.filter(i => i.id !== item.id);
            // this.goodsList.splice(targetIndex, 1);
            // console.log(arr.findIndex(i => i.id === item.id));
            instance.close();
          });
          break;
      }
    },
    changeSingle(item) {
      item.is_selected = item.is_selected === 1 ? 0 : 1;
    },
    selectAll() {
      if (this.isAllSelected === 0) {
        this.goodsList.forEach(i => (i.is_selected = 1));
      } else if (this.isAllSelected === 1) {
        this.goodsList.forEach(i => (i.is_selected = 0));
      }
    }
  },
  components: {}
};
</script>

<style lang="sass">
@import "../../common/style/variable.sass"

$goods-item-height: 180rpx

.cart
    .list-wrapper
        .cell-item
            .van-cell
            .cell-row
                .van-row
                    height: $goods-item-height
                .col
                    .van-col,.is-selected,.img
                        height: $goods-item-height
                        display: flex
                        justify-content: center
                        align-items: center
                    .is-selected
                        font-size: 20rpx
                        align-items: center
                        ._van-radio-group
                            margin-left: -5rpx
                    .img
                        width: 100%
                        height: 100%
                        .pic
                            display: inline-block
                            width: 100%
                            height: 100%
                    .info
                        height: $goods-item-height
                        width: 100%
                        text-align: left
                        padding: 16rpx
                        position: relative
                        box-sizing: border-box
                        .title
                            font-size: 36rpx
                            font-weight: bold
                            color: #000
                        .price
                            font-size: 36rpx
                            color: #f4b956
                            margin: 14rpx 0
                        .counter
                            box-sizing: border-box
                            position: absolute
                            bottom: 4rpx
                            left: 20rpx
                            right: 20rpx
                            height: 42rpx
                            .minus, .plus
                                width: 42rpx
                                height: 40rpx
                            .input
                                width: 80rpx
                                height: 40rpx
                            .minus
                                margin-right: 14rpx
                            .plus
                                margin-left: 14rpx
        .right-del
            height: 220rpx
            width: 65px
            background-color: red
            text-align: center
            color: white
            line-height: 220rpx
    .sub-bar
        ._van-radio-group
            margin-left: 20rpx
        .van-button--danger
            color: $theme-font-color
            background-color: $theme-color
            border-color: $theme-color
</style>
